<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" v-if="isAuth(['ROOT', 'APP_USER:INSERT', 'APP_USER:UPDATE'])"
		:close-on-click-modal="false" v-model="visible" width="480px">
		<el-scrollbar height="500px">
			<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
				<!-- <el-form :model="dataForm" label-width="80px"> -->
				<el-form-item label="用户名" prop="username"><el-input v-model="dataForm.username"
						clearable /></el-form-item>
				<el-form-item v-if="!dataForm.id" label="密码" prop="password"><el-input v-model="dataForm.password"
						clearable /></el-form-item>
				<el-form-item label="姓名" prop="name"><el-input v-model="dataForm.name" clearable /></el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="dataForm.sex">
						<el-radio-button label="男" />
						<el-radio-button label="女" />
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出生日期" prop="birthday">
					<el-date-picker v-model="dataForm.birthday" type="date" placeholder="选择日期" :editable="false"
						format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;" />
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="dataForm.phone" clearable />
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="dataForm.email" maxlength="200" clearable />
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="dataForm.address" clearable />
				</el-form-item>
				<el-form-item label="身高" prop="height">
					<el-input v-model="dataForm.height" clearable />
				</el-form-item>
				<el-form-item label="体重" prop="weight">
					<el-input v-model="dataForm.weight" clearable />
				</el-form-item>

				<el-form-item label="偏好">
					<el-input v-model="newLikes" @keyup.enter="inputLikesHandle" clearable />
					<p>
						<el-tag v-for="one in dataForm.likes" closable :disable-transitions="false"
							@close="closeLikesHandle(one)">
							{{ one }}
						</el-tag>
					</p>
				</el-form-item>

				<el-form-item label="忌口">
					<el-input v-model="newDislikes" @keyup.enter="inputDislikesHandle" clearable />
					<p>
						<el-tag v-for="one in dataForm.dislikes" closable :disable-transitions="false"
							@close="closeDislikesHandle(one)">
							{{ one }}
						</el-tag>
					</p>
				</el-form-item>


				<el-form-item label="短期目标" prop="shortTermGoal">
					<el-input v-model="dataForm.shortTermGoal" maxlength="250" clearable />
				</el-form-item>
				<el-form-item label="疾病" prop="diseases">
					<el-input v-model="dataForm.diseases" maxlength="250" clearable />
				</el-form-item>


				<el-form-item label="状态">
					<el-radio-group v-model="dataForm.status">
						<el-radio-button label="有效" />
						<el-radio-button label="无效" />
					</el-radio-group>
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="dataFormSubmit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	import dayjs from 'dayjs';
	// import {
	// 	resultProps
	// } from 'element-plus';
	// import {
	// 	ElMessage
	// } from 'element-plus';
	export default {
		data: function() {
			return {
				visible: false,
				newLikes: null,
				newDislikes: null,
				// dept: [],

				dataForm: {
					id: null, // 用来控制是新增还是修改
					name: null,
					username: null,
					password: null,
					birthday: null,
					sex: '男',
					phone: null,
					email: null,
					address: null,
					height: null,
					weight: null,
					// avatar: null,
					shortTermGoal: null,
					diseases: null,
					likes: [],
					dislikes: [],
					status: '有效'
				},

				dataRule: {
					username: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^[a-zA-Z0-9]{5,50}$/,
							message: '格式不正确，5-50字符'
						}
					],
					password: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^[a-zA-Z0-9]{6,20}$/,
							message: '格式不正确，6-20字符'
						}
					],
					name: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^[\u4e00-\u9fa5]{1,20}$/,
							message: '格式不正确，1-20字符'
						}
					],
					birthday: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^((((19|20)\d{2})-(0?(1|[3-9])|1[012])-(0?[1-9]|[12]\d|30))|(((19|20)\d{2})-(0?[13578]|1[02])-31)|(((19|20)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))-0?2-29))$/,
							message: '格式不正确'
						}
					],
					sex: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^男$|^女$/,
							message: '格式不正确，只能为男或女'
						}
					],
					phone: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '格式不正确'
						}
					],
					email: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,
							message: '格式不正确'
						},
						{
							max: 200,
							message: '最多200字符'
						}
					],
					address: [{
							required: true,
							message: '不能为空'
						},
						{
							max: 200,
							message: '最多200字符'
						}
					],
					height: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^[0-3]\.\d{2}$/,
							message: '格式不正确，单位为m，必须有1位整数和2位小数，如1.83'
						}
					],
					weight: [{
							required: true,
							message: '不能为空'
						},
						{
							pattern: /^(?:\d{1,2}|[1-4]\d{2}|500)\.\d$/,
							message: '格式不正确，单位为kg，0.0-500.0，保留1位小数，如65.5'
						}
					],
					likes: [],
					dislikes: [],
					status: [{
							required: true,
							message: 'status状态码不能为空'
						},
						{
							range: [0, 1],
							message: 'status状态码不正确，0无效（逻辑删除），1有效'
						}
					]
				}

			};
		},
		methods: {
			reset: function() {
				let dataForm = {
					id: null, // 用来控制是新增还是修改
					name: null,
					username: null,
					password: null,
					birthday: null,
					sex: '男',
					phone: null,
					email: null,
					address: null,
					height: null,
					weight: null,
					// avatar: null,
					shortTermGoal: null,
					diseases: null,
					likes: [],
					dislikes: [],
					status: '有效'
				};
				this.dataForm = dataForm;
			},

			init: function(id) {
				let that = this;
				// 重置表单控件
				that.reset();
				// 如果id为undefined，就对模型层id变量赋值为0，即默认为新增
				that.dataForm.id = id || 0;
				// 显示对话框
				that.visible = true;

				// DOM渲染操作要放在$nextTick函数中执行，例如加载数据
				that.$nextTick(() => {
					// 清理前端验证结果
					that.$refs['dataForm'].clearValidate();
					// that.$refs.dataForm.clearValidate(); // TODO: 回头可以试试
					// 加载二级列表数据
					// that.loadDeptSub();

					// 如果是修改，就加载数据
					if (that.dataForm.id) {
						that.$http('/app_user/searchById', 'POST', {
							id: id
						}, true, function(resp) {
							let json = {
								'1': '有效',
								'0': '无效'
							};
							that.dataForm.name = resp.name;
							that.dataForm.username = resp.username;
							that.dataForm.password = "abc123456"; // 因为密码不能修改，所以这里给个默认值以便于前后端验证，但实际后端不会进行修改
							that.dataForm.birthday = resp.birthday;
							that.dataForm.sex = resp.sex;
							that.dataForm.phone = resp.phone;
							that.dataForm.email = resp.email;
							that.dataForm.address = resp.address;
							that.dataForm.height = resp.height;
							that.dataForm.weight = resp.weight;
							that.dataForm.likes = resp.likes;
							that.dataForm.dislikes = resp.dislikes;
							that.dataForm.shortTermGoal = resp.short_term_goal;
							that.dataForm.diseases = resp.diseases;
							that.dataForm.status = json[resp.status + ''];
						});
					}

				});
			},

			// 输入偏好
			inputLikesHandle: function() {
				if (this.newLikes != null && this.newLikes != '') {
					if (this.dataForm.likes.includes(this.newLikes)) {
						ElMessage({
							message: '不能添加重复标签',
							type: 'warning',
							duration: 1200
						});
					} else {
						this.dataForm.likes.push(this.newLikes);
						this.newLikes = null;
					}
				}
			},

			// 输入忌口
			inputDislikesHandle: function() {
				if (this.newDislikes != null && this.newDislikes != '') {
					if (this.dataForm.dislikes.includes(this.newDislikes)) {
						ElMessage({
							message: '不能添加重复标签',
							type: 'warning',
							duration: 1200
						});
					} else {
						this.dataForm.dislikes.push(this.newDislikes);
						this.newDislikes = null;
					}
				}
			},

			// 删除偏好
			closeLikesHandle: function(tag) {
				this.dataForm.likes.splice(this.dataForm.likes.indexOf(tag), 1);
			},

			// 删除忌口
			closeDislikesHandle: function(tag) {
				this.dataForm.dislikes.splice(this.dataForm.dislikes.indexOf(tag), 1);
			},

			// 提交表单
			dataFormSubmit: function() {
				let that = this;
				// 验证表单
				that.$refs['dataForm'].validate(function(valid) {
					if (valid) {
						let json = {
							有效: 1,
							无效: 0
						};
						// 表单验证通过
						// let data = that.dataForm;
						let data = {
							id: that.dataForm.id,
							name: that.dataForm.name,
							username: that.dataForm.username,
							password: that.dataForm.password,
							birthday: that.dataForm.birthday,
							birthday: dayjs(that.dataForm.birthday).format('YYYY-MM-DD'),
							sex: that.dataForm.sex,
							phone: that.dataForm.phone,
							email: that.dataForm.email,
							address: that.dataForm.address,
							height: that.dataForm.height,
							weight: that.dataForm.weight,
							likes: that.dataForm.likes,
							dislikes: that.dataForm.dislikes,
							shortTermGoal: that.dataForm.shortTermGoal,
							diseases: that.dataForm.diseases,
							status: json[that.dataForm.status]
						};
						that.$http(
							`/app_user/${!that.dataForm.id ? 'insertAppUser' : 'updateAppUser'}`,
							'POST', data, true,
							function(resp) {
								console.log(resp);
								if (resp.code == 200) {
									ElMessage({
										message: '操作成功',
										type: 'success',
										duration: 1200
									});
									that.visible = false;
									that.$emit('refreshDataList');
								} else {
									ElMessage({
										message: '操作失败',
										type: 'error',
										duration: 1200
									});
								}
							});
					} else {
						ElMessage({
							message: '请检查表单填写是否正确',
							type: 'warning',
							duration: 1200
						});
						return false;
					}
				});
			}

		}
	};
</script>

<style lang="less" scoped="scoped"></style>